<template>
    <div class="search-com-container">
        <nut-searchbar v-model="state.searchValue" @search="searchFun" style="font-size: 16px;" @clear="clearFun"
            :placeholder="placeHolderById" clearable>
            <template v-slot:leftin>
                <Search2 size="12" />
            </template>
        </nut-searchbar>
    </div>
</template>
<script setup>
import { reactive, watch, computed, toRefs } from 'vue';
import { Search2 } from '@nutui/icons-vue-taro';
const props = defineProps({
    listType: Number
})
const state = reactive({
    searchValue: ''
});
const { listType } = toRefs(props)
const emit = defineEmits(["onhandleSearch", "onhandleClear"])
const searchFun = () => {
    emit("onhandleSearch", state.searchValue)

}
const clearFun = () => {
    emit("onhandleClear")
}
const placeHolderById = computed(() => {
    if (listType.value) {
        return "请输入影院名称"
    } else {
        return "请输入电影名称"
    }
})

watch(() => state.searchValue, (newValue, oldValue) => {
    if (!newValue) {
        emit("onhandleClear")

    }
})


</script>
<style lang="less">
.nut-searchbar__search-input .nut-searchbar__input-bar {
    font-size: 24px
}
</style>